<template>
  <div class="min-h-screen flex flex-col bg-gray-50 dark:bg-gray-900">
    <header class="bg-white dark:bg-gray-950 shadow-sm sticky top-0 z-50">
      <div class="container max-w-7xl mx-auto py-4">
        <div class="flex items-center justify-between">
          <NuxtLink to="/" class="text-2xl font-bold text-primary-600 dark:text-primary-400 flex items-center">
            <span class="mr-2">⚠️</span>
            特不靠谱
          </NuxtLink>
          <div class="flex items-center gap-6">
            <nav class="hidden md:flex space-x-8">
              <NuxtLink to="/"
                class="text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 font-medium">
                首页
              </NuxtLink>
              <NuxtLink to="/companies"
                class="text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 font-medium">
                不靠谱公司
              </NuxtLink>
              <NuxtLink to="/troublemakers"
                class="text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 font-medium">
                职场搅屎棍
              </NuxtLink>
            </nav>
            <div class="flex items-center space-x-2">
              <span class="text-gray-500 dark:text-gray-400 cursor-pointer" @click="toggleTheme">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                  class="lucide lucide-sun">
                  <circle cx="12" cy="12" r="4" />
                  <path d="M12 2v2" />
                  <path d="M12 20v2" />
                  <path d="m4.93 4.93 1.41 1.41" />
                  <path d="m17.66 17.66 1.41 1.41" />
                  <path d="M2 12h2" />
                  <path d="M20 12h2" />
                  <path d="m6.34 17.66-1.41 1.41" />
                  <path d="m19.07 4.93-1.41 1.41" />
                </svg>
              </span>
              <!-- 恢复使用 Switch 组件 -->
              <ClientOnly>
                <Switch :model-value="isDark" @update:model-value="toggleTheme" class="cursor-pointer" />
              </ClientOnly>
              <span class="text-gray-500 dark:text-gray-400 cursor-pointer" @click="toggleTheme">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                  class="lucide lucide-moon">
                  <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
                </svg>
              </span>
            </div>
            <button @click="toggleTheme" class="ml-4 px-3 py-1 bg-gray-200 dark:bg-gray-700 rounded-md text-sm">
              切换主题
            </button>
          </div>
          <button class="md:hidden" @click="toggleMobileMenu">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
              stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
            </svg>
          </button>
        </div>
      </div>
      <!-- 移动端菜单 -->
      <div v-show="mobileMenuOpen" class="md:hidden">
        <div class="container py-3 space-y-2">
          <NuxtLink to="/"
            class="block text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400">
            首页
          </NuxtLink>
          <NuxtLink to="/companies"
            class="block text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400">
            不靠谱公司
          </NuxtLink>
          <NuxtLink to="/troublemakers"
            class="block text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400">
            职场搅屎棍
          </NuxtLink>
          <div class="flex items-center space-x-2 py-2 mt-2 border-t border-gray-200 dark:border-gray-800">
            <span class="text-gray-500 dark:text-gray-400">主题</span>
            <span class="text-gray-500 dark:text-gray-400 cursor-pointer" @click="toggleTheme">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                class="lucide lucide-sun">
                <circle cx="12" cy="12" r="4" />
                <path d="M12 2v2" />
                <path d="M12 20v2" />
                <path d="m4.93 4.93 1.41 1.41" />
                <path d="m17.66 17.66 1.41 1.41" />
                <path d="M2 12h2" />
                <path d="M20 12h2" />
                <path d="m6.34 17.66-1.41 1.41" />
                <path d="m19.07 4.93-1.41 1.41" />
              </svg>
            </span>
            <!-- 恢复使用 Switch 组件 -->
            <ClientOnly>
              <Switch :model-value="isDark" @update:model-value="toggleTheme" class="cursor-pointer" />
            </ClientOnly>
            <span class="text-gray-500 dark:text-gray-400 cursor-pointer" @click="toggleTheme">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                class="lucide lucide-moon">
                <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
              </svg>
            </span>
          </div>
        </div>
      </div>
    </header>

    <main class="flex-1">
      <slot />
    </main>

    <footer class="bg-gray-100 dark:bg-gray-900 py-8 border-t border-gray-200 dark:border-gray-800">
      <div class="container max-w-7xl mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div>
            <h3 class="text-lg font-semibold mb-4">特不靠谱</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400">
              这里收集了各地不靠谱公司和职场搅屎棍，帮助你在职场中避雷。
            </p>
          </div>
          <div>
            <h3 class="text-lg font-semibold mb-4">链接</h3>
            <ul class="space-y-2">
              <li>
                <NuxtLink to="/"
                  class="text-sm text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400">
                  首页
                </NuxtLink>
              </li>
              <li>
                <NuxtLink to="/companies"
                  class="text-sm text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400">
                  不靠谱公司
                </NuxtLink>
              </li>
              <li>
                <NuxtLink to="/troublemakers"
                  class="text-sm text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400">
                  职场搅屎棍
                </NuxtLink>
              </li>
            </ul>
          </div>
          <div>
            <h3 class="text-lg font-semibold mb-4">联系我们</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400">
              有更多不靠谱公司或职场搅屎棍？请联系我们添加！
            </p>
            <div class="mt-4">
              <a href="mailto:klau.lover@gmail.com" class="text-primary-600 dark:text-primary-400 hover:underline">
                klau.lover@gmail.com
              </a>
            </div>
          </div>
        </div>
        <div
          class="mt-8 pt-8 border-t border-gray-200 dark:border-gray-800 text-center text-sm text-gray-600 dark:text-gray-400">
          &copy; {{ new Date().getFullYear() }} 特不靠谱. 保留所有权利.
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Switch } from '@/components/ui/switch';

// 移动菜单状态
const mobileMenuOpen = ref(false);

// 暗黑模式状态
const isDark = ref(false);

// 切换移动菜单
const toggleMobileMenu = () => {
  mobileMenuOpen.value = !mobileMenuOpen.value;
};

// 主题切换逻辑 - 使用 Switch 组件的方式
const toggleTheme = (value?: boolean) => {
  // 支持直接调用切换或从组件接收值
  if (typeof value === 'boolean') {
    isDark.value = value;
  } else {
    isDark.value = !isDark.value;
  }

  console.log('主题切换:', isDark.value ? '暗色' : '亮色');

  if (isDark.value) {
    document.documentElement.classList.add('dark');
    localStorage.setItem('theme', 'dark');
  } else {
    document.documentElement.classList.remove('dark');
    localStorage.setItem('theme', 'light');
  }
};

// 初始化
if (process.client) {
  const initTheme = () => {
    // 从本地存储获取主题设置
    const theme = localStorage.getItem('theme');
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

    // 设置初始状态
    isDark.value = theme === 'dark' || (!theme && prefersDark);

    // 应用主题
    if (isDark.value) {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }

    console.log('初始主题:', isDark.value ? '暗色' : '亮色');

    // 添加页面过渡动画
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('animate-fade-in');
        }
      });
    }, { threshold: 0.1 });

    document.querySelectorAll('section').forEach(section => {
      observer.observe(section);
    });
  };

  // 在浏览器环境中初始化
  if (document.readyState !== 'loading') {
    initTheme();
  } else {
    document.addEventListener('DOMContentLoaded', initTheme);
  }
}
</script>

<style>
.animate-fade-in {
  animation: fadeIn 0.8s ease-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 简易开关样式 */
.toggle-checkbox {
  right: 0;
  z-index: 10;
  transition: all 0.3s;
}

.toggle-checkbox:checked {
  right: 6px;
}

.toggle-label {
  transition: background-color 0.3s;
}
</style>